<template>
	<n-modal class="base-popup-small text-t-1" :show="modelValue" :on-mask-click="onClose">
		<div class="w-[320px] bg-bg-1 rounded flex flex-col pt-1 px-5 pb-5 relative">
			<div class="flex justify-center items-start">
				<base-image
					type="local"
					class="w-[50px]"
					:src="errType === 'region' ? 'slots/region.svg' : 'slots/mistake.svg'" />
				<base-icon
					name="close"
					class="text-[20px] absolute top-2 right-2 cursor-pointer"
					@click="onClose" />
			</div>
			<div>
				<div class="text-center mt-[14px] text-t-1 text-lg">{{ $t(titleT) }}</div>
				<div class="text-center mt-2 text-t-3 leading-5">{{ $t(descT) }}</div>
				<base-button class="mt-[18px]" type="primary" @click="handleCS">
					{{ $t('slotspre.connectService') }}
				</base-button>
			</div>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { NModal } from 'naive-ui'
import { BaseButton, BaseIcon, BaseImage } from '@/components/base'
import { customerService } from '@/utils'
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: 'slots'
	},
	errType: {
		type: String,
		default: 'region'
	}
})

const titleT = computed(() => {
	if (props.type === 'slots') {
		if (props.errType === 'region') {
			return 'slotspre.gameNotSupportTitle'
		} else {
			return 'slotspre.gameMaintainTitle'
		}
	} else {
		if (props.errType === 'region') {
			return 'casino.popupLimit.gameNotSupportTitle'
		} else {
			return 'casino.popupLimit.gameMaintainTitle'
		}
	}
})

const descT = computed(() => {
	if (props.type === 'slots') {
		if (props.errType === 'region') {
			return 'slotspre.gameNotSupportReason'
		} else {
			return 'slotspre.gameMaintainReason'
		}
	} else {
		if (props.errType === 'region') {
			return 'casino.popupLimit.gameNotSupportReason'
		} else {
			return 'casino.popupLimit.gameMaintainReason'
		}
	}
})

const emits = defineEmits(['update:modelValue', 'close'])

const onClose = () => {
	emits('update:modelValue', false)
	emits('close')
}

const handleCS = () => {
	customerService()
}
</script>
<style lang="scss" scoped></style>
